<template>
  <div>
    <!-- <sg-button type1="primary"></sg-button>
    <sg-button type1="success"></sg-button> -->
    <sg-button @send="getMoney">
      <template #icon>
        lg图标
      </template>
      <template #text>
        登录
      </template>
      <!-- <span slot="icon">lg图标</span> -->
    </sg-button>

    <sg-list :list="list">
      <!-- 插槽结构 -->
      <!-- 在插槽结构获取到组件内部的数据 -->
      <div slot-scope="{ row, index }" class="item">
        <div>左侧图标</div>
        <div>{{ row }}</div>
        <div>右侧图标</div>
        <div>{{ index }}</div>
      </div>
    </sg-list>

    <sg-test :visible.sync="visible" :color.sync="color"></sg-test>
    <!-- v-model -->
    <!-- :value="visible" -->
    <!-- @input="visible = $event" -->
    <!-- v-model在组件上只能使用1次 -->
    <!-- sync修饰符 -->
    <!-- :visible="visible" -->
    <!-- @update:visible="visible = $event" -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['鞋子', '袜子', '腰带子'],
      visible: true,
      color: 'red'
    }
  },

  created () {

  },

  methods: {
    getMoney (e) {
      console.log('子组件触发的', e)
    }
  }
}
</script>

<style scoped lang='less'>
.item {
  display: flex;
  background: green;
}
</style>
